<template>
	<view class="zcxxdgdrfgyt">
		<!-- 	<image class="dfcdfdrytyt"
			src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/yx/yuyue/xqw/img/%E5%9C%BA%E6%99%AF.gif"></image>
		 -->
		<video class="dfcdfdrytyt" autoplay loop :controls="kjcxvfds"
			src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/yx/yuyue/xqw/img/8e16e5d652d9392d29a1da32e149fc9e.mp4"></video>

		<view class="cxcfgttryty" v-if="jcxdfde">


			<view class="dfdftrecxt cen " :class="[sd.classname,sd.cls]" @tap="jjxcfgg(sd)" v-for="(sd,idx) in jkcfrte">
				<view class="pr dfdfrtcdt">
					<image v-if="sd.cls" class="cxvcxvtyytu"
						src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/yx/yuyue/xqw/img/qipao1.png">
					</image>
					<image v-else class="cxvcxvtyytu"
						src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/yx/yuyue/xqw/img/qipao2.png">
					</image>
					<view class="cvcxrtyrycvyt vertical-center">
						<image :src="sd.extra" class="cvcxtytryvcyt cz" mode="widthFix"></image>
					</view>
				</view>
				<view class="xzcrtrtrt">
					{{sd.label}}
				</view>
			</view>


		</view>

		<view class="kcvxvtytytuy display-flex pd" v-if="jcxdfde">
			<view class="">
				<button type="default" class="cvgfdtryty fz32" @tap="kjxcddef">跳过</button>
			</view>
			<view class="flex-1 ml20">
				<button type="primary" class="fz32 fdfgfgyuyuy" :class="kcxdfg()>0?'act':''" @tap="yijxzcxzwert">已选好，去探索
					（{{kcxdfg()}}/3）</button>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref } from "vue"
	import { hf, dxrequest, callBack } from "@/util/index.js"
	const jcxdfde = ref()
	const hsbjsf = "https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/yx/yuyue/xqw/%E7%81%AB%E5%B1%B1%E8%83%8C%E6%99%AF%E9%9F%B3%E6%95%88.mp3"
	const dianji = "https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/yx/yuyue/xqw/%E6%B3%A1%E6%B3%A1%E9%80%89%E4%B8%AD%E9%9F%B3%E6%95%88.mp3"
	const mxcfdf = ref(0)
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	innerAudioContext.loop = true
	innerAudioContext.src = hsbjsf
	const emit = defineEmits([
		'close',
		'success'
	]);
	setTimeout(a => {
		jcxdfde.value = true
	}, 1000)
	const kjcxvfds = ref(false)
	const jkcfrte = ref([])
	const initsxdf = async () => {
		jkcfrte.value = []
		const jsxcdfes = ['aa', 'ab', 'ac', 'ad', 'ae', 'af', 'ag', 'ah', 'ai', 'aj']
		const { data } = await dxrequest('maya/api/getzidian', { id: '375' })
		const kxcdfd = await dxrequest('maya/api/xzxcjieduanlist')
		if (kxcdfd.data.length > 0) {
			data[0].map((a, idx) => {

				kxcdfd.data.map(b => {
					if (a.value != b.value) {
						jkcfrte.value.push({
							...a,
							cls: '',
							classname: jsxcdfes[idx]
						})
					}
				})

			})
		} else {
			data[0].map((a, idx) => {
				jkcfrte.value.push({
					...a,
					cls: '',
					classname: jsxcdfes[idx]
				})
			})
		}

	}
	initsxdf()
	const kcxdfg = () => {
		let jcddft = 0
		jkcfrte.value.map(a => {
			if (a.cls) {
				++jcddft
			}
		})
		return jcddft
	}
	const jjxcfgg = (sd) => {
		const ccvrt = uni.createInnerAudioContext();
		ccvrt.src = dianji
		ccvrt.play()

		if (kcxdfg() > 2) {
			if (sd.cls) {
				sd.cls = ""
			} else {
				uni.showToast({
					title: "超限制了",
					icon: "none"
				})
			}

			return
		}

		if (sd.cls) {
			sd.cls = ""
		} else {
			sd.cls = "act"
		}

		// jkcfrte.value.splice(idx, 1)

	}

	const yijxzcxzwert = async () => {
		let kxcdfd = []
		jkcfrte.value.map(a => {
			if (a.cls) {
				kxcdfd.push({
					label: a.label,
					value: a.value
				})
			}
		})
		const dcfdsftr = JSON.stringify(kxcdfd)
		console.log(dcfdsftr)
		innerAudioContext.stop()
		await dxrequest('maya/api/jzxcdfdsf', { ds: dcfdsftr }, 'post')
		emit('close')
	}
	const kjxcddef = async () => {
		innerAudioContext.stop()
		await dxrequest('maya/api/iscfjsd')
		emit('close')
	}
</script>

<style scoped>
	.zcxxdgdrfgyt {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.dfcdfdrytyt {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		animation: njhxcdfrtr 1s linear;
		transform: scale(1.1);
	}

	.dfdftrecxt {
		position: absolute;
		z-index: 99;


	}

	.dfdftrecxt.aa {
		left: 40rpx;
		top: 720rpx;
		animation: vxcvfgfa 2s linear;


	}


	.dfdftrecxt.ab {
		left: 300rpx;
		top: 780rpx;
		animation: vxcvfgfb 3s linear;
	}


	.dfdftrecxt.ac {
		right: 40rpx;
		top: 550rpx;
		animation: vxcvfgfc 3s linear;
	}



	.dfdftrecxt.ad {
		left: 360rpx;
		top: 390rpx;
		animation: vxcvfgfd 4s linear;

	}


	.dfdftrecxt.ae {
		left: 80rpx;
		top: 320rpx;
		animation: vxcvfgfe 3s linear;
	}

	.dfdftrecxt.af {
		left: 250rpx;
		top: 120rpx;
		animation: vxcvfgff 4s linear;
	}

	.dfdftrecxt.ag {
		right: 40rpx;
		top: 180rpx;
		animation: vxcvfgfg 5s linear;
	}

	.dfdftrecxt.ah {
		right: 40rpx;
		top: 820rpx;
		animation: vxcvfgfh 3s linear;
	}

	.dfdftrecxt.ai {
		left: 160rpx;
		top: 540rpx;
		animation: vxcvfgfi 3s linear;
	}

	.dfdftrecxt.aj {
		left: 60rpx;
		top: 40rpx;
		animation: vxcvfgfj 6s linear;
	}

	.dfdftrecxt.aa .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;

	}

	.dfdftrecxt.ab .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.2s;
	}

	.dfdftrecxt.ac .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.4s;
	}

	.dfdftrecxt.ad .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.6s;
	}

	.dfdftrecxt.ae .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.8s;
	}

	.dfdftrecxt.af .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.3s;
	}

	.dfdftrecxt.ag .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.4s;
	}

	.dfdftrecxt.ah .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.2s;
	}

	.dfdftrecxt.ai .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.6s;
	}

	.dfdftrecxt.aj .dfdfrtcdt {
		animation: cvcxrtyty 1s ease-in-out infinite;
		animation-delay: 0.3s;
	}



	.cxvcxvtyytu {
		width: 180rpx !important;
		height: 180rpx !important;
	}

	.xzcrtrtrt {
		color: #fff !important;
		font-size: 28rpx !important;
	}

	.cvcxtytryvcyt {
		width: 100rpx !important;
		height: 100rpx !important;

	}

	.cvcxrtyrycvyt {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}


	/* 	@-webkit-keyframes njhxcdfrtr {
			0% {
				transform: scale(1.8);
				opacity: 0;
			}
			100% {
				transform: scale(1);
				opacity: 1;
			}
		} */

	@keyframes njhxcdfrtr {
		0% {
			transform: scale(1.8);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes cvcxrtyty {
		0% {
			transform: translateY(0) scale(0.8);
		}

		50% {
			transform: translateY(20rpx) scale(1);
		}

		100% {
			transform: translateY(0) scale(0.8);
		}
	}

	@keyframes vxcvfgfa {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			left: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			left: 40rpx;
			top: 720rpx;
		}
	}


	@keyframes vxcvfgfb {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			top: 780rpx;
		}
	}

	@keyframes vxcvfgfc {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			right: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			right: 40rpx;
			top: 550rpx;
		}
	}

	@keyframes vxcvfgfd {
		0% {
			transform: scale(0.1);
			opacity: 0;
			top: 900rpx;
			left: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			left: 360rpx;
			top: 390rpx;
		}
	}

	@keyframes vxcvfgfe {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			left: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			left: 80rpx;
			top: 320rpx;
		}
	}

	@keyframes vxcvfgff {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			left: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			left: 250rpx;
			top: 120rpx;
		}
	}

	@keyframes vxcvfgfg {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			right: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			right: 40rpx;
			top: 180rpx;
		}
	}

	@keyframes vxcvfgfh {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			right: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			right: 40rpx;
			top: 820rpx;
		}
	}

	@keyframes vxcvfgfi {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			left: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			left: 160rpx;
			top: 540rpx;
		}
	}

	@keyframes vxcvfgfj {
		0% {
			transform: scale(0.2);
			opacity: 0;
			top: 900rpx;
			left: 300rpx;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			left: 60rpx;
			top: 40rpx;
		}
	}

	.kcvxvtytytuy {
		position: fixed;
		left: 0;

		width: 100%;
		bottom: 50rpx;
		z-index: 999;
	}

	.cvgfdtryty {
		background: #505050;
		color: #fff;
		width: 260rpx;
	}
</style>